<template>
	<view class="p_bg_f3 p_b_128">
		<view class="merge_main">
			<view class="merge_list" v-for="(item, index) in listData" :key="item.id">
				<image src="https://dy.sykj365.com/uploads/mini/weixuanzhong@2x.png" class="p_img_48 p_margin_r_24" v-if="!item.choose"
					@click="getChoose(item)"></image>
				<image src="https://dy.sykj365.com/uploads/mini/xuanzhong@2x.png" class="p_img_48 p_margin_r_24" v-else
					@click="getChoose(item)"></image>
				<image src="https://dy.sykj365.com/uploads/mini/file@2x.png" class="p_img_64 p_margin_r_16"></image>
				<view class="p_flex_2">
					<view class="p_font_32">{{item.name}}</view>
					<view class="p_font_24 p_color_b2 p_margin_t_8">{{getPage(item)}}</view>
					<view class="p_margin_t_16 p_flex10 merge_btn p_font_26">
						<view @click="getUpGo(index, item)">上移</view>
						<view @click="getDownGo(index, item)">下移</view>
					</view>
				</view>
			</view>
		</view>
		<bottomView btnText1="合并" btnText2="取消" @getClear="getClear" @getSubmit="getSubmit">
			<view class="p_font_24 p_color_7a">已选{{num_}}个文件</view>
		</bottomView>
		<!--  -->
		<van-dialog use-slot title="请填写合并后的文件名称" :show="isShow" :show-confirm-button="false">
			<input maxlength="15" v-model="name" placeholder="最多输入15个字" placeholder-class="p_font_28 p_color_b2"
				class="p_font_28 i_" />
			<view class="p_font_28 p_flex2 btn_wrappper">
				<view class="p_flex_1 p_color_b2 p_flex7" @click="isShow = false">取消</view>
				<view class="p_flex_1 p_color_05b570 p_flex7" @click="getConfirm">合并</view>
			</view>
		</van-dialog>
	</view>
</template>

<script>
	import bottomView from '../../components/bottomView.vue';

	export default {
		components: {
			bottomView
		},
		data() {
			return {
				listData: [],
				num_: 0,
				isShow: false,
				name: '',
				listIds: [],
			}
		},
		onLoad() {
			this.getListData();
		},
		methods: {
			getListData() {
				this.$http.post(this.$api.cartList).then(res => {
					let arr = [];
					res.data.forEach((e) => {
						e.choose = false

						if (e.information == 0) {
							arr.push(e)
						}
					})
					this.listData = arr;
				})
			},
			getPage(item) {
				let page = item.page;
				// let size = (item['file-size'] / 1024 / 1024).toFixed(2);
				if (item.print_range) {
					let a_ = item.print_range.split('-');
					page = a_[1] - a_[0];
				}

				return page + '页'
			},
			getChoose(item) {
				item.choose = !item.choose;
				this.getChooseIds(true);
			},
			getChooseIds(e) {
				let list_ = [];
				this.listData.forEach((n) => {
					if (n.choose) {
						list_.push(n)
					}
				})

				if (e) {
					this.num_ = list_.length;
				} else {
					return list_
				}
			},
			getClear() {
				uni.navigateBack();
			},
			getSubmit() {
				let l_ = this.getChooseIds();
				let ids_ = [];
				let type_ = [];
				let t_s = true;

				if (l_.length > 1) {
					l_.forEach((n) => {
						ids_.push(n.id)
						type_.push(n.type)
					})
				}

				if (type_.length > 0) {
					type_.forEach((n, k) => {
						if (n != type_[0]) {
							t_s = false
						}
						if (n == 2) {
							t_s = false
						}
					})
				}

				if (l_.length < 2) return getApp().getMsg('至少选择两个文件');
				if (!t_s) return getApp().getMsg('文档包含横、纵，方向一致才能打印哦');

				this.isShow = true;
				this.listIds = ids_;
			},
			getConfirm() {
				if (!this.name) return getApp().getMsg('请输入文件名称');

				this.isShow = false;
				this.$http.post(this.$api.merge, {
					ids: this.listIds.toString(),
					name: this.name
				}).then(res => {
					getApp().getMsg('合并成功', 'success');
					uni.setStorageSync('set', true);
					getApp().getBack();
				})
			},
			// 上移
			getUpGo(index, item) {
				if (index != 0) {
					this.listData.splice(index, 1);
					this.listData.splice(index - 1, 0, item);
				}
			},
			// 下移
			getDownGo(index, item) {
				if (index != this.listData.length - 1) {
					this.listData.splice(index, 1);
					this.listData.splice(index + 1, 0, item);
				}
			}
		}
	}
</script>

<style lang="less">
	.merge_main {
		min-height: calc(100vh - 128rpx);
		padding: 0 32rpx;
		overflow: hidden;
	}

	.merge_list {
		display: flex;
		padding: 32rpx;
		margin: 32rpx 0;
		background-color: #fff;
		border-radius: 16rpx;

		&:first-child {
			.merge_btn {
				view {
					&:first-child {
						color: #B2B2B2;
					}
				}
			}
		}

		&:last-child {
			.merge_btn {
				view {
					&:last-child {
						color: #B2B2B2;
					}
				}
			}
		}
	}

	.merge_btn {
		view {
			width: 100rpx;
			height: 52rpx;
			box-sizing: border-box;
			border: 1px solid #E8E8E8;
			border-radius: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 16rpx;
			color: #7A7A7A;
		}
	}

	.i_ {
		width: 80%;
		margin: 50rpx auto;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #E8E8E8;
	}

	.btn_wrappper {
		border-top: 1px solid #f4f4f4;

		view {
			height: 90rpx;

			&:last-child {
				border-left: 1px solid #f4f4f4;
			}
		}
	}
</style>